<template>
	<view style="width: 100%;height: 100%;">
		<canvas canvas-id="canvas2" id="canvas2"></canvas>
		<button class="but" type="default" @click="exportImage2">保存图片</button>
	</view>
</template>

<script>
	import Painter from "mp-painter";
	export default {
		data() {
			return {
				week: '星期五',
				datalist: {},
				color: '#06c1ac',
				showPickerColor: false,
				year: '2021',
				date: '',
				title: '',

			};
		},
		async onReady() {
			let timestamp = +new Date()
			const db = uniCloud.database()
			const value = uni.getStorageSync('item');
			let res = await db.collection(value).orderBy('date desc').get({
				getOne: true
			})
			this.date = this.$u.timeFormat(res.result.data.date, 'yyyy年mm月dd日 hh时MM分ss秒')
			if (value === 'weibo') {
				this.title = '微博热搜榜'
				this.datalist = res.result.data.wb_news.list.slice(0, 10)
			} else if (value === 'douyin') {
				this.title = '抖音热搜榜'
				this.datalist = res.result.data.dy_sou.list.slice(0, 15)
			} else if (value === 'bilibili') {
				this.title = '哔哩哔哩日榜'
				this.datalist = res.result.data.list
			}else if (value === 'zhihu') {
				this.title = '知乎热榜'
				res.result.data.list.forEach(item=>{
					item.other=item.other.replace('热度','')
				})
				this.datalist = res.result.data.list
			}
			console.log(this.datalist);
			let painter1 = new Painter(uni.createCanvasContext("canvas2"));
			await painter1.draw({
				"type": "container",
				"direction": "vertical",
				width: 750,
				height: 1600,
				"children": [{
						"position": "absolute",
						top: 0,
						left: 0,
						"type": "image",
						src: "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-1c8d9cf3-f03e-430f-963d-3d8e19d65dbe/85fbc795-069e-4811-b9cb-59fdc2da752c.jpg",
						width: 750,
						height: 1600,
						// objectFit: "contain",
						objectFit: "cover",
						objectPosition: ["center", "top"]
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						color: '#57e2f4',
						top: 130,
						left: 180,
						width: 650,
						fontSize: 70,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.title
					},
					{
						"type": "text-block",
						"fontFamily": "times",
						top: 20,
						left: 180,
						color: '#fff',
						width: 470,
						fontSize: 26,
						fontWeight: "bold",
						fontFamily: "Times, 楷体",
						"content": this.date
					},
					{
						type: "container",
						direction: "horizontal",
						width: 750,
						top: 50,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[0].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								left:20,
								width: 280,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[0].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[1].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								left:20,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[1].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[2].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								fontSize: 34,
								left:20,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[2].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[3].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								fontSize: 34,
								left:20,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[3].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[4].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								left:20,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[4].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[5].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								left:20,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[5].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[6].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								left:20,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[6].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[7].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								left:20,
								width: 250,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[7].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[8].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								fontSize: 34,
								left:20,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[8].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},
					{
						type: "container",
						direction: "horizontal",
						"top": 20,
						width: 750,
						left: 40,
						children: [{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 450,
								fontSize: 34,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": this.datalist[9].title
							},
							{
								"type": "text-block",
								"fontFamily": "times",
								color: '#fff',
								width: 250,
								fontSize: 34,
								left:20,
								fontWeight: "bold",
								fontFamily: "Times, 楷体",
								"content": '热度：' + this.datalist[9].other
							},
						]
					},
					{
						"type": "rect",
						"top": 20,
						left: 40,
						"background": "#fff",
						"width": 650,
						"height": 3
					},

				]

			});
		},
		onLoad(option) {
			this.week = option.w
			this.year = option.y
			this.date = option.d
			this.noli = option.n
		},
		methods: {
			async getdata() {
				let timestamp = +new Date()
				const db = uniCloud.database()
				let res = await db.collection('mor_news').where({
					date: this.$u.timeFormat(timestamp, 'yyyy-mm-dd')
				}).get({
					getOne: true
				})
				if (res.result.code === 0) {
					console.log(res.result.data);
					this.datalist = res.result.data
				} else {

				}
			},
			getPickerColor(color) {
				uni.showLoading({
					title: '请稍等...',
					mask: true
				});
				/* 隐藏弹窗 */
				this.showPickerColor = false;
				/* 判断颜色值是否有效 */
				if (color) {
					this.color = color;
					setTimeout(res => {
						uni.hideLoading();
						this.update()
					}, 1500)
				}
			},
			update() {
				let path;
				let navigateMethod;
				// #ifdef H5
				path = this.$route.path;
				navigateMethod = uni.navigateTo;
				// #endif
				// #ifndef H5
				path = (pages => "/" + pages[pages.length - 1].route)(getCurrentPages());
				navigateMethod = uni.redirectTo;
				// #endif
				navigateMethod.call(null, {
					url: path + `?w=${this.week}&y=${this.year}&d=${this.date}&n=${this.noli}`
				});
			},
			exportImage() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				/**
				 * 在 uni-app:h5 中下载
				 * uni app 未在 h5 中实现 saveImageToPhotosAlbum
				 * @param {string} base64
				 */
				const donwloadBase64 = base64 => {
					const a = document.createElement("a");
					a.href = base64;
					a.download = "mp-painter-playground-export.jpg";
					a.click();
				}
				uni.canvasToTempFilePath({
					canvasId: "canvas",
					fileType: "jpg",
					success: res => {
						console.log(res);
						// #ifdef H5
						donwloadBase64(res.tempFilePath)
						uni.hideLoading();
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						})
						// #endif
					}
				})
			},
			exportImage2() {
				uni.showLoading({
					title: '保存中...',
					mask: true
				});
				/**
				 * 在 uni-app:h5 中下载
				 * uni app 未在 h5 中实现 saveImageToPhotosAlbum
				 * @param {string} base64
				 */
				const donwloadBase64 = base64 => {
					const a = document.createElement("a");
					a.href = base64;
					a.download = "mp-painter-playground-export.jpg";
					a.click();
				}
				uni.canvasToTempFilePath({
					canvasId: "canvas2",
					fileType: "jpg",
					success: res => {
						console.log(res);
						// #ifdef H5
						donwloadBase64(res.tempFilePath)
						uni.hideLoading();
						// #endif
						// #ifndef H5
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: res => {
								uni.hideLoading();
								uni.showToast({
									title: '保存成功',
									duration: 2000
								});
							}
						})
						// #endif
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.od {
		object-fit: contain;
		position: absolute;
	}

	#canvas {
		width: 750rpx;
		height: 1500rpx;
	}

	#canvas2 {
		width: 750rpx;
		height: 1600rpx;
	}

	.but {
		width: 45%;
		font-weight: bold;
		margin: 30rpx auto;
		background-color: #ff9900;
		color: #fff;
	}
</style>
